<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素类列表</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
    <div class="collapse navbar-collapse">
        <nav class="navbar navbar-default">
            <a class="navbar-brand" href="#">Brand</a>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </nav>
    </div>
</div>
<script>
    //匿名函数
    (function(){
        /** 点击时添加和删除类名**/
        var lis = document.querySelectorAll(".nav li");
        for(var i=0;i<lis.length;i++){
            lis[i].addEventListener("click",function(e){
                //去掉原先所有的样式
                for(var j=0;j<lis.length;j++){
                    lis[j].classList.remove("active");
                }
                //添加点击样式
                this.classList.add("active");
                e.preventDefault();  //取消事件的默认操作
            })
        }

        /** 点击时存在类名则删除，不存在类名则添加**/
        var elem = document.querySelector(".navbar-brand");
        //点击时如果存在active这个属性则去掉，如果不存在这个属性则加上
        elem.addEventListener("click",function(e){
            //判断是否包含active这个类名
            var isExist = elem.classList.contains("active");
            this.classList.toggle("active",!isExist);
            e.preventDefault();
        })
    })()
</script>
</body>
</html>